<template>
    <div id="box">
        <!-- 顶部 -->
        <div class="topbox">
            <!-- 标题 -->
            <div class="title">
                <li>
                    <router-link to="/">
                      <img src="../assets/img/left.png" alt="" class="ret"></router-link>
                  </li>
                <li>
                    <span>榜单广场</span>
                </li>
                <li>
                    <span class="share1">
                      <van-cell title="分享" @click="showShare = true" class="share" />
                      <van-share-sheet v-model="showShare" title="分享" :options="options" @select="onSelect"/>
                    </span>
                </li>
            </div>
            <!-- 榜单 -->
            <div class="t-content">
                <div class="t-box">
                    <!-- 最热榜 -->
                    <div class="t-hot-box">
                        <div class="hot-box-top">
                            <span>每日最热榜单  ></span>
                            <span class="re">根据每日参与量更新</span>
                        </div>
                        <div class="hot-box-bottom">
                            <div class="hot-content">
                                <div class="hot-show" v-for="(list,index) in lists1" :key="list.name" type="heat" @click="hotgo(index)">
                                    <img :src="list.img" alt="" class="hot-show-img">
                                    <div class="show-detail">
                                        <span class="hot-title">
                                            <span class="jinhao">#</span>{{list.name}}
                                        </span>
                                        <span class="pers">
                                            <span class="pnum">{{list.participants}}</span>人参与 | <span class="vnum">{{list.bystander}}万</span>人...
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 剧目榜 -->
                    <div class="t-hot-box t-op-box">
                        <div class="hot-box-top">
                            <span>大麦剧目榜  ></span>
                            <span class="re">每日更新</span>
                        </div>
                        <div class="hot-box-bottom">
                            <div class="hot-content">
                                <div class="hot-show" v-for="(list,index) in lists2" :key="list.name" type="opera" @click="operago(index)">
                                    <img :src="list.img" alt="" class="hot-show-img">
                                    <div class="show-detail">
                                        <span class="hot-title">
                                            {{list.name}}
                                        </span>
                                        <span class="pr">
                                            <span class="hot-p">
                                                ￥{{list.price}}
                                            </span>
                                            起
                                        </span>
                                        
                                    </div>
                                </div>                      
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 本地榜单 -->
            <div class="local">
                <div class="local-content">
                    <p class="local-title">
                    本地精选榜
                </p>
                <div class="loacl-con">
                    <div class="local-show" v-for="(list,index) in lists3" :key="list.name" type="local" @click="localgo(index)">
                        <img :src="list.img" alt="" class="local-img">
                        <span class="localtype">{{list.name}}</span>
                        <span class="local-label">
                            {{list.listtype}}
                        </span>
                    </div>
                </div> 
                </div>
            </div>
            <!-- 更多榜单 -->
            <div class="more">
                <div class="local-content">
                    <p class="local-title">
                    更多榜单
                </p>
                <div class="local-con">
                    <div class="local-show" v-for="(list,index) in lists4" :key="list.name" type="more" @click="morego(index)">
                        <img :src="list.img" alt="" class="local-img">
                        <span class="localtype">{{list.name}}</span>
                        <span class="local-label">
                            {{list.listtype}}
                        </span>
                    </div> 
                </div>
            </div>
        </div>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import Vue from "vue";
import { Toast } from "vant";
import { ShareSheet } from "vant";
Vue.use(ShareSheet);
Vue.use(Toast);

export default {
  name: "Square",
  data() {
    return {
      lists1: [],
      lists2: [],
      lists3: [],
      lists4: [],
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" }
      ]
    };
  },
  created() {
    axios({
      url: "/hots1",
      method: "get",
      params: {
        yl5: "heat"
      }
    }).then(res => {
      this.lists1 = res.data;
      // this.$nextTick(()=>{})
    });
    axios({
      url: "/hots2",
      method: "get",
      params: {
        yl5: "opera"
      }
    }).then(res => {
      this.lists2 = res.data;
    });
    axios({
      url: "/hots4",
      method: "get",
      params: {
        yl5: "local"
      }
    }).then(res => (this.lists3 = res.data));
    axios({
      url: "/hots3",
      method: "get",
      params: {
        yl5: "more"
      }
    }).then(res => (this.lists4 = res.data));
  },
  methods: {
    hotgo(idx) {
      this.$router.push({
        path: "/Detail",
        query: { num: this.lists1[idx].id }
      });
      // console.log(this.lists1)
      // console.log(this.lists1[idx].id)
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    operago(idx) {
      console.log(this.lists2[idx]);
      this.$router.push({
        path: "/Detail",
        query: { num: this.lists2[idx].id }
      });
    },
    localgo(idx) {
      this.$router.push({
        path: "/Detail",
        query: { num: this.lists3[idx].id }
      });
    },
    morego(idx) {
      this.$router.push({
        path: "/Detail",
        query: { num: this.lists4[idx].id }
      });
    }
  }
};
</script>

<style scoped>
li {
  list-style: none;
}
#box {
  font-size: 0.08rem;
}
.ret {
  height: 0.2rem;
}
.topbox {
  font-size: 0.2rem;
}
.title {
  height: 0.45rem;
  font-size: 0.2rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0.12rem 0;
}
.share1 {
  width: 0.57rem;
  height: 0.27rem;
  font-size: 0.12rem;
  background-color: #fee9f0;
  color: #ff0052;
  border-radius: 0.15rem;
  border: none;
}
.share {
  font-size: 0.12rem;
  background-color: #fee9f0;
  color: #ff0052;
  border-radius: 0.15rem;
  padding: 0.03rem 0.12rem;
}
.t-content {
  height: 3.97rem;
  /* background-color: aquamarine; */
  display: flex;
  align-items: center;
}
.t-box {
  height: 3.44rem;
  width: 5rem;
  display: flex;
  overflow: scroll;
}
.t-hot-box,
.t-op-box {
  width: 2.18rem;
  height: 100%;
  margin: 0 0.22rem 0;
  float: left;
  flex-shrink: 0;
}
.t-hot-box {
  background: linear-gradient(90deg, #ff4286, #fcb984);
  border-radius: 0.15rem;
}
.hot-show-img {
  width: 0.67rem;
}
.t-op-box {
  background-color: purple;
}
.hot-box-top {
  font-size: 0.15rem;
  height: 0.78rem;
  color: #fdfdff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 0.17rem;
}
.re {
  font-size: 0.12rem;
}
.hot-box-bottom {
  height: 2.66rem;
  background-color: #fff;
  border-radius: 0.15rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hot-content {
  height: 2.33rem;
  width: 1.88rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hot-show {
  height: 0.67rem;
  display: flex;
  justify-content: space-between;
}
.show-detail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 0.1rem;
}
.hot-title {
  height: 0.36rem;
  width: 1.07rem;
  font-size: 0.12rem;
  line-height: 0.18rem;
  color: #000;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 2; /** 显示的行数 **/
  overflow: hidden; /** 隐藏超出的内容 **/
}
.jinhao {
  width: 0.15rem;
  height: 0.15rem;
  text-align: center;
  line-height: 0.15rem;
  background-color: #21b8ff;
  display: inline-block;
  border-radius: 50%;
  font-weight: bold;
  color: #fff;
}
.pnum,
.vnum {
  color: #f38627;
}
.pers {
  font-size: 0.01rem;
}
.t-op-box {
  background: linear-gradient(90deg, #ab6afc, #6962fe);
}
.pr {
  color: #a5a5a5;
  font-size: 0.12rem;
}
.hot-p {
  color: #d43172;
  font-size: 0.19rem;
}
.local,
.more {
  margin: 0 0.19rem;
  overflow: hidden;
}
.local-title {
  font-size: 0.16rem;
  margin-bottom: 0.14rem;
}
.local-img {
  width: 0.91rem;
  height: 1.19rem;
}
.local-show {
  width: 0.92rem;
  height: 1.69rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
  float: left;
  margin: 0.06rem 0.06rem;
}
.local-type {
  font-size: 0.12rem;
}
.local-label {
  font-size: 0.11rem;
  color: #98979d;
}
.local-content {
  width: 3.12rem;
  margin: 0 auto;
  overflow: hidden;
}
.more {
  margin-top: 0.19rem;
}
.localtype {
  font-size: 0.11rem;
  width: 0.91rem;
  height: 0.12rem;
  line-height: 0.14rem;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 1; /** 显示的行数 **/
  overflow: hidden; /** 隐藏超出的内容 **/
}
.local-con {
  overflow: hidden;
}
</style>

